import React, { useEffect } from 'react'
import { useRoutes, useLocation, useNavigate } from 'react-router-dom'
import { ConfigProvider } from 'antd'
import styles from '@/styles/index.module.scss'
// import 'antd/dist/reset.css'
import routes from './router'
const ToHome = () => {
  const navigate = useNavigate()
  useEffect(() => {
    navigate('/home')
  }, []) //eslint-disable-line
  return <div></div>
}
const ToLogin = () => {
  const navigate = useNavigate()
  useEffect(() => {
    navigate('/login')
  }, []) //eslint-disable-line
  return <div></div>
}
const BeforeRouterEnter = () => {
  const outlet = useRoutes(routes)
  const location = useLocation()
  const token = localStorage.getItem('back-token')
  // 如果访问登录页面且有token，前往home页面
  if (location.pathname === '/login' && token) {
    return <ToHome />
  }
  // 如果访问的不是登录页面且没有token，前往login页面
  if (location.pathname !== '/login' && !token) {
    return <ToLogin />
  }
  return outlet
}

const App: React.FC = () => {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: styles.colorPrimary
        }
      }}>
      <BeforeRouterEnter />
    </ConfigProvider>
  )
}

export default App
